import * as THREE from 'three'

import { merge } from "lodash"

export class Zone {

  #defaultOptions = {
    cube: {
      sizes: [
        80, 10, 1, -40, 0, 0, 0, 0, 0,
        110, 10, 1, -80, 0, -55, 0, 90, 0,
        180, 10, 1, 10, 0, -110, 0, 0, 0,
        150, 10, 1, 0, 0, 20, 0, 90, 0,
        240, 10, 1, 100, 0, 10, 0, 90, 0,
        100, 10, 1, 50, 0, 130, 0, 0, 0,
      ]
    }
  }

  constructor(globe) {
    this.globe = globe;
    this.options = merge({}, this.#defaultOptions, globe.options.zone);
    this.buildGroup()
    this.buildPlane()
    this.buildCube()
    
  }

  buildCube() {
    let sizes = this.options.cube.sizes;
    for (var i = 0, _i = sizes.length; i < _i; i += 9) {
      var size = [sizes[i], sizes[i + 1], sizes[i + 2],];
      var position = [sizes[i + 3], sizes[i + 4], sizes[i + 5],]
      var rotation = [sizes[i + 6], sizes[i + 7], sizes[i + 8],].map(n => n*Math.PI/180)

      var geometry = new THREE.BoxGeometry(...size);
      console.log(geometry.faces)
      for( var j = 0, _j = geometry.faces.length; j < _j; j ++ ){

        geometry.faces[j].color.setHex(0x999999)
        geometry.faces[4].color.setHex(0xff0000)
        geometry.faces[5].color.setHex(0xff0000)
        geometry.faces[6].color.setHex(0xff0000)
        geometry.faces[7].color.setHex(0xff0000)
        geometry.faces[3].color.setHex(0xff0000)
        geometry.faces[4].color.setHex(0xff0000)
        geometry.faces[0].color.setHex(0xff0000)
        geometry.faces[1].color.setHex(0xff0000)
        geometry.faces[2].color.setHex(0xff0000)
      }

      var material = new THREE.MeshBasicMaterial({
        vertexColors: THREE.FaceColors,
        opacity: 0.5,
        transparent: true,
        side:THREE.DoubleSide
      });
      var cube = new THREE.Mesh(geometry, material);
      cube.position.set(...position)
      cube.rotation.set(...rotation)
      this.group.add(cube);
    }
  }

  buildPlane() {
    var geometry = new THREE.PlaneGeometry(300, 300, 1);
    var material = new THREE.MeshBasicMaterial({
      color: 0x666666,
      opacity: 0.9,
      side: THREE.DoubleSide
    });

    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 1, 0)
    plane.rotation.set(Math.PI / 2, 0, 0)
    console.log(plane)
    this.globe.scene.add(plane)
  }

  buildGroup() {
    let group = new THREE.Group()
    group.position.set(0, 7, -10)
    this.group = group
    this.globe.scene.add(this.group)
  }

}